{% load static %}
<!doctype html>

<html lang="ru">

{% if corusel_data.shadow %}
  <div class="shadow-sm my-3">
{% else %}
  <div class="my-3">
{% endif %}
    <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
      <div class="carousel-indicators">
        {% for slider_ in slides_list %}
          {% if forloop.first %}
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          {% else %}
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ forloop.counter0 }}" aria-label="Slide {{ forloop.counter }}"></button>
          {% endif %}
        {% endfor %}
      </div>

      <div class="carousel-inner">

        {% for slider_ in slides_list %}
          {% if forloop.first %}
            <div class="carousel-item active">
          {% else %}
            <div class="carousel-item">
          {% endif %}

            {% if slider_.images %}
              <img src="{{ slider_.images.url }}" class="vh-50 img-fluid" alt="{{ slider_.title }}">
            {% else %}
              <svg class="bd-placeholder-img" width="{{ corusel_data.width }}" height="{{ corusel_data.height }}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="{{ slider_.color_fill }}"></rect</svg>
            {% endif %}
            {% if slider_.show_text %}
              <div class="container z-0 position-absolute">
                <div class="carousel-caption {{ slider_.horizontal_alignment }} {{ slider_.color_text }}">
                  <h1>{{ slider_.title }}</h1>
                  <p class="opacity-75">{{ slider_.description }}</p>
                  {% if slider_.name_button %}
                  <p><a class="btn btn-lg btn-primary" href="{{ slider_.link_button }}">{{ slider_.name_button }}</a></p>
                  {% endif %}
                </div>
              </div>
            {% endif %}
          </div>
        {% endfor %}

      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Предыдущий</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Следующий</span>
      </button>
    </div>
  </div>

</html>
